<template>
  <fieldset>
    <legend>购物车</legend>
    <h1>购物车:cart</h1>
    <ul>
      <li v-for="item in cartData" :key="item.id">
        <b>产品：{{ item.title }}</b>
        ---
        <b>价格：{{ item.price }}</b>
        ---
        <b>数量：{{ item.count }}</b>
        ---
        <button @click="delCart(item)">-</button>
      </li>
    </ul>
    <h1>总价：{{ total }}</h1>
  </fieldset>
</template>
<script setup>
import { useCart } from "../../store/carts/index";
import { useProduct } from "../../store/product/index";
import { storeToRefs } from "pinia";
let useProductStore = useProduct();
let useCartStore = useCart();
let { cartData, total } = storeToRefs(useCartStore);
let delCart = (i) => {
  useCartStore.DEL_CART(i);
  useProductStore.productData.find((item) => {
    if (item.id === i.id) {
      item.inventory++;
    }
  });
};
</script>
